<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current">
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
			</fu-steps>
		</fu-section>
		
		<fu-section title="显示点类型" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current" dot>
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
			</fu-steps>
			<view class="fu-m-t-30">
				<fu-steps :current="current" direction="column" dot>
					<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
				</fu-steps>
			</view>
		</fu-section>
		
		<fu-section title="错误状态" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current">
				<fu-steps-item :title="item.name" :desc="item.desc" :error="item.error" v-for="(item,index) in list2" :key="index"></fu-steps-item>
			</fu-steps>
		</fu-section>
		
		<fu-section title="自定义图标" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current" activeIcon="select" inactiveIcon="right">
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
			</fu-steps>
		</fu-section>
		
		<fu-section title="自定义插槽" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current">
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index">
					<template v-slot:icon>
						<text :class="[current == index? 'fu-color-2979ff': '']">步</text>
					</template>
				</fu-steps-item>
			</fu-steps>
		</fu-section>
		
		<fu-section title="自定义颜色" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current" activeColor="#ffaa00">
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
			</fu-steps>
		</fu-section>
		
		<fu-section title="垂直显示" size="14" color="#8f9ca2" customClass="fu-m-t-20" type="line">
			<fu-steps :current="current" direction="column" dot>
				<fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list1" :key="index"></fu-steps-item>
			</fu-steps>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	
	// data数据
	const list1 = reactive([
		{ name: '步骤一', desc: '15:25' },
		{ name: '步骤二', desc: '15:25' },
		{ name: '步骤三', desc: '15:25' },
		{ name: '步骤四', desc: '15:25' }
	]);
	const list2 = reactive([
		{ name: '步骤一', desc: '15:25' },
		{ name: '步骤二', desc: '15:25', error: true },
		{ name: '步骤三', desc: '15:25' },
		{ name: '步骤四', desc: '15:25' }
	]);
	let current = ref(0);
</script>

<style>
</style>